<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content">
        <div class="personInfocont">
		     <ul>
		     	<li class="person-img">
		     		<p>头像</p>
	                <img :src="login_user.Photo | filterPhoto"/>
		     	</li>
	             <li>
	                <p>用户名</p>
	                <span>{{ login_user.TrueName }}</span>
	             </li>
	             <li>
	                <p>职位</p>
	                <span >采购员</span>
	             </li>
	             <li>
	                <p>性别</p>
	                <span>女</span>
	             </li>
	             <li>
	                <p>地区</p>
	                <span>武汉</span>
	             </li>
	             <li class="person-exit">
	             	<button type="button" class="mui-btn mui-btn-blue" @click="logout">退出登录</button>
	             </li>
	         </ul>
		</div>
    </div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { MessageBox } from 'mint-ui'
import commonHeader from '@/components/commonHeader.vue'
export default {
    components: { commonHeader, MessageBox },
    data() {
        return {
            title: '个人信息'
        }
    },
    computed: {
        ...mapState( [ 'login_user' ] )
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING', 'LOGOUT' ] ),
        initialization() {
            setTimeout(()=>{
                this.UPDATE_SHOW_LOADING(false)
            },500) 
        },
        logout() {
            MessageBox.confirm('是否退出登录?').then(action => {
                this.LOGOUT()
                this.$router.push({ name: 'login' })
            })
        }
    },
    created() {
       this.initialization()
    } 
}
</script>
<style scoped>

</style>

